<style lang="scss" scoped>
  @import '../../styles/search.scss' ;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select{
    margin-right: 10px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
<template>
  <div>
    <div class="commhightseach">
      <div class="seach-icon"><i class="el-icon-menu"></i>筛选</div>
      <div class="seachtype" @click="changetype" >{{showtotle>2?'普通搜索':'高级搜索'}}<i v-bind:class="{'el-icon-caret-bottom':isactive ,'el-icon-caret-top':!isactive}" ></i></div>
    </div>
    <el-form :inline="true" :model="form" class="seachpanel" ref="seachform">
      <el-form-item label="手机号" prop="cellphone" >
        <el-input v-model="form.cellphone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button  @click="resetForm('seachform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/babel">

  export default {
    nameL:'SearchBox',
    data() {
      return {
        select: '1',
        showtotle: 2,
        isactive: true,
        value:'',
        placeholder:'请输入手机号',
        form: {},
      }
    },
    methods: {
      onSubmit() {
        this.$emit('seach', this.form)
      },
      changetype() {
        if (this.showtotle > 2) {
          this.showtotle = 1
          this.isactive = true
        } else {
          this.showtotle = 5
          this.isactive = false
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();

        this.$emit('seach', {...this.form})

      }
    }
  }

</script>

